<template>
  <d2-container>
    <div class="flex-1 ml-1 mt-1">
      <div class="flex-1 row-ac">
        <div class="row-ac">
          <div class="font-s-2 text-light-grey mr-1">按用户查询</div>
          <div>
            <el-select size="small" v-model="queryInfo.user_id" clearable filterable remote :remote-method="searchUser"
              placeholder="用户名/手机号/别名">
              <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="ml-2">
          <el-button size="mini" type="primary" @click="clickQuery">查询</el-button>
        </div>
      </div>
      <div class="mt-2" style="width: 80%;">
        <el-table :data="distributiondataList" stripe style="width: 100%;">
          <el-table-column align="center" label="序号" type="index" width="65" />
          <el-table-column align="center" label="用户" prop="user_name" width="80" />
          <el-table-column align="center" label="提现金额" prop="amount" width="80">
            <template slot-scope="scope">
              <div>- {{ scope.row.amount }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="实到金额" prop="actual_amount" width="80">
            <template slot-scope="scope">
              <div style="color: #C63A00;">- {{ scope.row.actual_amount }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="增加/提现" prop="types" width="80">
            <template slot-scope="scope">
              <el-tag size="mini" type="warning" effect="dark" v-if="scope.row.audit_state == 0">提现中</el-tag>
              <el-tag size="mini" type="success" effect="dark" v-if="scope.row.audit_state == 1">提现成功</el-tag>
              <el-tag size="mini" type="warning" effect="dark" v-if="scope.row.audit_state == 2">不通过审核</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="申请时间" prop="apply_time" width="80" />
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="examineEdit(scope.row.id)"
                v-if="scope.row.audit_state == 0">审核通过</el-button>
              <el-button type="danger" size="mini" @click="noExamineEdit(scope.row.id)"
                v-if="scope.row.audit_state == 0">不通过</el-button>
              <el-button type="warning" size="mini" v-if="scope.row.audit_state == 1">打款成功</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-1 ml-2 mt-2">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="distributiondataTotal">
        </el-pagination>
      </div>
      <el-dialog :visible.sync="dialogExamineVisible" width="40%" title="审核备注">
        <el-form :model="form" ref="form" label-width="80px">
          <el-form-item label="审核备注" prop="audit_remarks">
            <div style="width: 80%;">
              <el-input v-model="form.audit_remarks" type="textarea" rows="4"></el-input>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogExamineVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  import {
    distributiondataListUrl,
    adminuserListUrl,
    distributiondataPatchUrl
  } from '@/utils/distribution'
  export default {
    data() {
      return {
        dialogExamineVisible: false,
        queryInfo: {
          types: '',
          user_id: '',
          page: 1,
          page_size: 10
        },
        activeName: 'first',
        queryInfoUser: {
          search: ''
        },
        form: {
          audit_state: '',
          audit_user: '',
          audit_remarks: ''
        },
        getDistriId: '',
        userList: [],
        distributiondataList: [],
        distributiondataTotal: 1,
      }
    },
    created() {
      this.getDistributiondataList()
      this.getUserList()
    },
    computed: {
      ...mapState('d2admin/user', [
        'info'
      ])
    },
    mounted() {
      this.user_id = this.info.userinfo.id
    },
    methods: {
      searchUser(query) {
        this.getUserList(query)
      },
      getUserList(query) {
        this.queryInfoUser.search = query;
        this.$get(adminuserListUrl, this.queryInfoUser).then(res => {
          this.userList = res.data.data.list
        })
      },
      getDistributiondataList() {
        this.$get(distributiondataListUrl, this.queryInfo).then(res => {
          this.distributiondataList = res.data.data.list
          this.distributiondataTotal = res.data.data.total
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.page_size = newSize
        this.getDistributiondataList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getDistributiondataList()
      },
      clickQuery() {
        this.getDistributiondataList()
      },
      examineEdit(distriId) {
        this.dialogExamineVisible = true,
          this.getDistriId = distriId
        this.auditState = true
        this.form.audit_state = 1
      },
      noExamineEdit(distriId) {
        this.dialogExamineVisible = true,
          this.getDistriId = distriId
        this.auditState = false
        this.form.audit_state = 2
      },
      submitForm() {
        this.form.audit_user = this.user_id
        this.$patch(distributiondataPatchUrl + this.getDistriId + '/', this.form).then(res => {
          if (res.data.code == 200) {
            this.getDistributiondataList()
            this.$message({
              message: '打款成功',
              type: 'success'
            });
            this.dialogExamineVisible = false
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .report-box {
    height: 120px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
</style>
